<template>
  <div class="board-container">
    <Header />
    <div class="main-content">
      <div class="left-class">
        <!-- 数据卡片  -->
        <div class="data-card">
          <DataCard />
        </div>
        <!-- 折线图 -->
        <div class="line-chart">
          <LineChart />
        </div>
        <!-- 订单状态  -->
        <div class="order-statue">
          <OrderState />
        </div>
      </div>
      <div class="right-class">
        <div class="top-class">
          <!-- 柱状图 -->
          <GraphChart />
        </div>
        <div class="bottom-class">
          <!-- 热门场次 -->
          <HotSection />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import Header from './components/Header.vue'
import DataCard from './components/DataCard.vue'
import LineChart from './components/LineChart.vue'
import OrderState from './components/OrderState.vue'
import GraphChart from './components/GraphChart.vue'
import HotSection from './components/HotSection.vue'
</script>

<style scoped>
.board-container {
  display: flex;
  flex-direction: column;
  height: 100vh;

  .main-content {
    display: flex;
    flex: 1;
    margin-top: 12px;
    .left-class {
      flex: 6;
      background: #fff;
      padding: 5px;
    }
    .right-class {
      flex: 4;
      background: #fff;
      padding: 10px;
    }
  }
}
</style>
